<template>
  <div >
    <el-container>
      <el-header height="45%">
        <el-container>
          <!-- 右侧栏上部 表格 -->
          <el-main>
            <template>
              <el-table
                  :data="tableData"
                  height="400px"
                  @row-click="rowClick"
                  style="width: 100%">
                <el-table-column
                    fixed="left"
                    prop="id"
                    label="订单ID"
                    width="70">
                </el-table-column>
                <el-table-column
                    prop="orderNumber"
                    label="订单号"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="订单状态"
                    width="80">
                </el-table-column>
                <el-table-column label="收货地址">
                  <el-table-column
                      prop="province"
                      label="省份"
                      width="120">
                  </el-table-column>
                  <el-table-column
                      prop="municipality"
                      label="市区"
                      width="120">
                  </el-table-column>
                  <el-table-column
                      prop="county"
                      label="县"
                      width="120">
                  </el-table-column>
                  <el-table-column
                      prop="address"
                      label="地址"
                      width="250">
                  </el-table-column>
                </el-table-column>

                <el-table-column label="收货人信息">
                  <el-table-column
                      prop="userId"
                      label="用户ID"
                      width="70">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="收货人姓名"
                      width="120">
                  </el-table-column>
                  <el-table-column
                      prop="phone"
                      label="收货人手机号"
                      width="120">
                  </el-table-column>
                </el-table-column>

                <el-table-column
                    prop="productName"
                    label="商品名称"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="unitPrice"
                    label="单价"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="count"
                    label="购买数量"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="sendAddress"
                    label="发货地"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="currentPosition"
                    label="当前地址"
                    width="300">
                </el-table-column>
                <el-table-column
                    prop="haulier"
                    label="承运方"
                    width="120">
                </el-table-column>
              </el-table>
            </template>
          </el-main>
        </el-container>
      </el-header>

      <el-main>
        <el-container>
          <el-aside width="40%">
            <template>
              <el-table
                  :data="tableData"
                  style="width: 100%">
                <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地址">
                </el-table-column>
              </el-table>
            </template>
          </el-aside>

          <el-main>Main</el-main>
        </el-container>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: []
    }
  },
  methods:{
    loadAdmins(){
      let url = 'http://localhost:20001/admin/order/list'
      axios.get(url).then((response)=>{
        let json = response.data;
        console.log('查询到的列表为>>>>',json.data)
        this.tableData = json.data;
      })
    },
    rowClick(row){
      console.log(row)
    }
  },
  mounted() {
    this.loadAdmins();
  }
}
</script>
